import "babel-polyfill";
import tpl from './index.tpl';
import './index.scss';

import { Logo } from './logo/';
import { Nav } from './nav/';
import { Search } from './search/'


import tools from '../../utils/tools';

class Header {
	constructor(el,fieldDatas,phoneDatas) {
	   this.name = 'header'; 
	   this.$el = el;
	    
	   this.fieldDatas = fieldDatas;
	   this.phoneDatas = phoneDatas;

	   this.logo = new Logo();
	   this.nav = new Nav();
	   this.search = new Search();
	}
   async init(){
		await this.render();
		       this.bindEvent();
	 }

	 async  render () {
	   await this.$el.append(tools.tplReplace(tpl(), {
		 logo : this.logo.tpl(),
		 nav :this.nav.tpl(this.fieldDatas),
		 search:this.search.tpl()
    
		}));
	}
	bindEvent(){
		const $nav = $('.J_nav'),
	           $searchBtn = $('.J_searchBtn');
		$nav.on('mouseenter','.nav-item',{phoneDatas:this.phoneDatas,oNav:this.nav},this.nav.navMouseIn);
		$searchBtn.on('click',this.search.searchPhone)

	}

}

export { Header };